<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>生命周期钩子</h2>
      <p class="count">{{ count }}</p>
      <button @click="fn">btn</button>
    </div>

    <script src="./vue2.js"></script>
    <script>
      let timer;

      new Vue({
        data() {
          return {
            count: 10,
          };
        },
        methods: {
          fn() {
            this.count++;
          },
        },
        // 只有创建阶段和挂载阶段的生命周期会自动执行
        // 生命周期的执行顺序和书写顺序是无关的，只和名字有关

        // 创建阶段
        beforeCreate() {
          // 可以拿到this，但是拿不到data或者methods等选项的内容
          // 因为拿不到data，所以不能在这里做数据请求
          // 一般不在这里做事情
          console.log("beforeCreate", this.count, this.fn);
        },

        // vue去初始化了选项api

        created() {
          // 因为api已经初始化完了，所以就可以拿到所有选项的内容
          console.log("created", this.count, this.fn);
          // fetch("http://www.pudge.wang:3080/api/rated/list")
          //   .then((response) => response.json())
          //   .then((res) => {
          //     // console.log(res);
          //     this.list = res.list
          //   });
        },

        // vue会去检查是否有html模板

        // 挂载阶段
        beforeMount() {
          // 可以做数据请求
          console.log("beforeMount", document.querySelector("#app").innerHTML);
        },

        // vue3会去渲染，创建和插入dom节点
        // vue2用真实dom去替换虚拟dom

        mounted() {
          // 只能在mounted里面才可以拿到dom相关的信息,之前全部都是拿不到的
          // 可以做数据请求
          console.log("mounted", document.querySelector("#app").innerHTML);

          timer = setInterval(() => {
            console.log(123);
          }, 1000);

          setTimeout(() => {
            // 让组件卸载的方法
            this.$destroy();
          }, 5000);
        },

        // 当数据改变的时候，生命周期才会触发

        // 更新阶段
        // 不是数据改变的前后，是页面重新渲染的前后（都是在数据改变之后）
        beforeUpdate() {
          console.log(
            "beforeUpdate",
            this.count,
            document.querySelector("p").innerHTML
          );
          // this.count++;
        },
        // 在updated里面不要去操作数据，会造成死循环
        updated() {
          console.log(
            "updated",
            this.count,
            document.querySelector("p").innerHTML
          );
        },

        // 卸载阶段
        beforeDestroy() {
          console.log("beforedestroy");
          clearInterval(timer);
        },
        destroyed() {
          console.log("destroyed");
        },
      }).$mount("#app");
    </script>
  </body>
</html>
